<template>
  <div :class="[prefixCls + '-hue']" tabindex="0" @click="$el.focus()" @keydown.esc="handleEscape" @keydown.left="handleLeft" @keydown.right="handleRight" @keydown.up="handleUp" @keydown.down="handleDown">
    <div ref="container" :class="[prefixCls + '-hue-container']" @mousedown="handleMouseDown" @touchmove="handleChange" @touchstart="handleChange">
      <div :style="{top: 0, left: `${percent}%`}" :class="[prefixCls + '-hue-pointer']">
        <div :class="[prefixCls + '-hue-picker']"></div>
      </div>
    </div>
  </div>
</template>

<script>
import HASMixin from './hsaMixin';
import Prefixes from './prefixMixin';
import { clamp } from './utils';

export default {
  name: 'Hue',

  mixins: [HASMixin, Prefixes],

  data() {
    const normalStep = (1 / 360) * 25;
    const jumpStep = 20 * normalStep;

    return {
      left: -normalStep,
      right: normalStep,
      up: jumpStep,
      down: -jumpStep,
      powerKey: 'shiftKey',
      percent: clamp((this.value.hsl.h * 100) / 360, 0, 100)
    };
  },

  methods: {
    change(percent) {
      this.percent = clamp(percent, 0, 100);

      const { h, s, l, a } = this.value.hsl;
      const newHue = clamp((percent / 100) * 360, 0, 360);

      if (h !== newHue) {
        this.$emit('change', { h: newHue, s, l, a, source: 'hsl' });
      }
    },
    handleSlide(e, direction) {
      e.preventDefault();
      e.stopPropagation();

      if (e[this.powerKey]) {
        this.change(direction < 0 ? 0 : 100);
        return;
      }

      this.change(this.percent + direction);
    },
    handleChange(e) {
      e.preventDefault();
      e.stopPropagation();

      const left = this.getLeft(e);

      if (left < 0) {
        this.change(0);
        return;
      }

      const { clientWidth } = this.$refs.container;

      if (left > clientWidth) {
        this.change(100);
        return;
      }

      this.change((left * 100) / clientWidth);
    }
  },

  watch: {
    value() {
      this.percent = clamp((this.value.hsl.h * 100) / 360, 0, 100);
    }
  }
};
</script>
